/**
 * 样式工具模块
 * 提供卡片样式加载和应用的功能
 */
import { ref } from 'vue';
import { ElMessage } from 'element-plus';

// 可用的样式列表
export const availableStyles = ref<{ name: string, label: string, cssFile?: string }[]>([]);

// 当前选中的样式
export const selectedStyle = ref('default');

/**
 * 初始化样式列表
 * 从themes.json加载定义的样式映射
 */
export const initStyles = async (): Promise<void> => {
  try {
    // 从themes.json加载定义的样式映射
    const themes = (await import('../../public/card-themes/themes.json')).default;
    availableStyles.value = Object.keys(themes).map(label => {
      return {
        name: themes[label as keyof typeof themes],
        label: label,
        cssFile: themes[label as keyof typeof themes]
      };
    });
    
    // 默认加载第一个样式
    if (availableStyles.value.length > 0) {
      selectedStyle.value = availableStyles.value[0].name;
      // 确保样式文件加载完成后再应用
      setTimeout(() => {
        applyStyle();
      }, 100);
    } else {
      console.warn('没有可用的卡片样式');
      ElMessage.warning('没有找到可用的卡片样式');
    }
  } catch (error) {
    console.error('初始化样式失败:', error);
    ElMessage.error('加载样式配置失败');
  }
};

/**
 * 应用卡片样式
 * 将选中的样式应用到所有卡片预览元素
 */
export const applyStyle = async (): Promise<void> => {
  try {
    // 应用样式类到所有卡片预览元素
    applyStyleClassesToElements();

    // 确保样式文件已加载
    await loadStyleFile();
  } catch (error) {
    console.error('加载样式文件失败:', error);
    ElMessage.warning('样式加载失败，将使用默认样式');
  }
};

/**
 * 应用样式类到预览元素
 * 移除所有样式类，添加当前选中的样式类
 */
export const applyStyleClassesToElements = (): void => {
  const styleElements = document.querySelectorAll('.card-preview');
  styleElements.forEach(el => {
    // 移除所有样式类
    availableStyles.value.forEach(style => {
      el.classList.remove(`card-${style.name.replace('.css', '')}`);
    });
    // 添加当前选中的样式类
    if (selectedStyle.value) {
      el.classList.add(`card-${selectedStyle.value.replace('.css', '')}`);
    }
  });
};

/**
 * 加载样式文件
 * 创建link元素加载CSS文件
 * @returns Promise<void>
 */
export const loadStyleFile = (): Promise<void> => {
  return new Promise((resolve, reject) => {
    if (!selectedStyle.value) {
      resolve();
      return;
    }

    // 使用link标签加载CSS
    const styleId = `card-style-${selectedStyle.value.replace('.css', '')}`;
    let styleLink = document.getElementById(styleId) as HTMLLinkElement;

    if (styleLink) {
      // 样式已加载
      resolve();
      return;
    }

    // 创建新的link元素
    const link = document.createElement('link');
    link.id = styleId;
    link.rel = 'stylesheet';
    link.href = `./card-themes/${selectedStyle.value}`;

    // 监听加载事件
    link.onload = () => {
      console.log(`成功加载样式: ${selectedStyle.value}`);
      resolve();
    };

    link.onerror = (e) => {
      console.error(`样式文件加载失败: ${selectedStyle.value}`, e);
      reject(new Error(`样式文件 ${selectedStyle.value} 加载失败`));
    };

    document.head.appendChild(link);
  });
};

/**
 * 获取预览样式
 * @param styleType 样式类型
 * @returns 样式对象
 */
export const getPreviewStyle = (styleType: string): Record<string, string> => {
  // 动态加载样式文件
  const styleLink = document.getElementById(`preview-style-${styleType}`);
  if (!styleLink) {
    const link = document.createElement('link');
    link.id = `preview-style-${styleType}`;
    link.rel = 'stylesheet';
    link.href = `./card-themes/${styleType}.css`;
    document.head.appendChild(link);
  }

  const style: Record<string, string> = {
    width: '100px',
    height: '60px',
    borderRadius: '4px',
    marginTop: '8px',
    className: `card-${styleType}`
  };

  return style;
};